<template>
    <div style="height: 100%;">
        <navbar :title="$t('mod_exit_save')"></navbar>
        <div id="play_sco_content" class="iframe-container" style="padding-top: 49px;">
           <iframe id="play_content" ref="scormBox" name="content"  :src="scomHtml" height="100%" width="100%" frameborder="0" :key="scomHtml"/>
            <!-- <iframe id="play_content" name="content"  :src="scormUrl" height="100%" width="100%" frameborder="0" :key="scormUrl"/> -->
        </div>
    </div>
</template>

<script>
// import { countAlgorithm } from '@/utils/tools';
export default {
    name: 'ScoPlayer',
    props: [],
    data() {
        return {
            // cosUrl: unescape(this.$route.query.cosUrl),
            // aiccSid: unescape(this.$route.query.aiccSid),
            // aiccUrl: unescape(this.$route.query.aiccUrl),
            itmId: this.$route.params.itmId,
            tkhId: this.$route.params.tkhId,
            modId: this.$route.params.modId,
            usrEntId: this.$route.params.userEntId,
            // isMultiSco: this.$route.query.isMultiSco,
            // playStyle: this.$route.query.playStyle,
            lang: this.$route.query.lang,
            lmsInitCalled: false,
            hadSub: false,
            // isReview: this.$route.query.isReview,
            timeSpend: 0,
            attempt: 0,
            // token: window.localStorage.getItem('token'),
            scormUrl: '',
            detailData: {},
            startTime: new Date()
        };
    },
    methods: {
        onlineCalculation(type) {
            this.$axios({
                method: 'GET',
                url: `/app/api/data/kanban/online/${type}/calculate`
            }).then(res => {
                console.log(res);
            });
        },
        // 返回
        back() {
            // this.$router.go(-1);
            this.$router.go(-1);
            // this.$refs.scormBox.contentWindow.scoPlayerSubmit(true);
        },
        init() {
            // if (this.token !== '' && this.aiccUrl !== '' && typeof (this.aiccUrl) !== 'undefined' && this.aiccSid !== '' && typeof (this.aiccSid) !== 'undefined') {
            //     this.scormUrl = `${this.appUrl}/htm/sco_player_mobile40.htm?env=wizb
            //     &mod_id=${this.modId}&cos_url=${this.cosUrl}&aicc_sid=${this.aiccSid}&aicc_url=${this.aiccUrl}
            //     &cos_id=${this.cosId}&tkh_id=${this.tkhId}&is_multi_sco=${this.is_multi_sco}&play_style=${this.playStyle}&lang=${this.lang}&token=${this.token}`;
            // }
            /*获取scrom 课件信息*/
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/module/detail`,
                params: {
                    itmId: this.itmId,
                    modId: this.modId
                }
            }).then(res => {
                if (res && res.status === 200) {
                    this.detailData = res.data;
                    this.scormUrl = this.appUrl + res.data.sourceUrl;
                    // this.scormUrl = 'http://192.168.5.90:8888' + res.data.sourceUrl;
                    //this.scormUrl = 'http://192.168.2.199:8080' + res.data.sourceUrl;
                }
            });
        },
        _wbModuleGetTime(datetime) {
            var month = '';
            var day = '';
            var hour = '';
            var minutes = '';
            var seconds = '';
            if (datetime.getMonth() > 9) { month = datetime.getMonth() + 1; } else { month = '0' + (datetime.getMonth() + 1); }

            if (datetime.getDate() > 9) { day = datetime.getDate(); } else { day = '0' + datetime.getDate(); }

            if (datetime.getHours() > 9) { hour = datetime.getHours(); } else { hour = '0' + (datetime.getHours() + 1); }

            if (datetime.getMinutes() > 9) { minutes = datetime.getMinutes(); } else { minutes = '0' + datetime.getMinutes(); }

            if (datetime.getSeconds() > 9) { seconds = datetime.getSeconds(); } else { seconds = '0' + datetime.getSeconds(); }

            const time = datetime.getFullYear() + month + day + hour + minutes + seconds;

            return time;
        },
        sendPost() {
            // 调用ref=scormBox的iframe中嵌套的页面的scoPlayerSubmit方法，通过postMessage方法向iframe中嵌套的页面发送消息
            this.$refs['scormBox'].contentWindow.postMessage('scoPlayerSubmit', '*');
        },
        scoPlayerSubmit() {
            this.$refs.scormBox.contentWindow.scoPlayerSubmit(true);
        }
    },
    destroyed() {
        this.onlineCalculation('ONLINE_LEARN_DEC');
    },
    mounted() {
        this.onlineCalculation('ONLINE_LEARN_INC');
        this.init();
        // this.sconLearningRecords();
    },
    beforeRouteLeave(to, from, next) {
        next(this.sendPost(true));
    },
    computed: {
        scomHtml() {
            // 访问本地html，若是APP，需要在对应html给ajax请求加入token和developer：mobile
            let url = './static/htm/sco_player_mobile40.htm';
            if (process.env.NODE_ENV === 'production_app') {
                url = '/mobile/static/htm/sco_player_mobile40.htm';
            }
            const modId = this.modId;
            const cosUrl = this.scormUrl;
            const tkhId = this.$route.params.tkhId;
            const token = window.localStorage.getItem('token');
            const aiccsid = this.$route.params.userEntId + ':_:_:' + this.$route.params.resId + ':_:_:' + this.modId + ':_:_:' + '' + ':_:_:' + this._wbModuleGetTime(new Date()) + ':_:_:' + this.$route.params.tkhId + ':_:_:';
            let sUrl = `${url}?mod_id=${modId}&cos_url=${cosUrl}&tkh_id=${tkhId}&aicc_sid=${aiccsid}&aicc_url=/app/module/cmi&web_launch=undefined&cos_id=${this.$route.params.resId}&tkh_id=${tkhId}&mod_id=${modId}`;
            if (process.env.NODE_ENV === 'production_app') {
                // 注意：如果app调用本身包里的html，会产生只记录时长不修改状态的情况（也不会定时保存），所以app还是要调用服务器上的sco入口页
                let appUrl = this.appUrl;
                // 判断appUrl最后一个字符是否是/，是则删除/
                if (appUrl.charAt(appUrl.length - 1) === '/') {
                    appUrl = appUrl.substring(0, appUrl.length - 1);
                }
                sUrl = appUrl + sUrl;
                sUrl += `&token=${token}&appUrl=${appUrl}`;
            }
            return sUrl;
        }
    },
    beforeDestroy() {
    }
};
</script>

<style scoped lang="less">
 .iframe-container{
   max-width: 100%;
   height: 100%;
//    margin-top: 56px;
 }
 /deep/.van-nav-bar__title {
    margin: 15px;
}
</style>
